<template>
	<radio-group v-model="payType" class="pay-box" @change="radioChange">
		<template v-for="(item, key) in payList">
			<view class="label flex-between" @click="payType = key">
				<view class="left flex">
					<m-icon size="48" color="#06B4FD" spa="0 24 0 0" :type="payIcon[key]" />
					<view class="box">
						<view class="flex">
							<text class="title">{{ item }}</text>
						</view>
						<template v-if="key == 1">
							<text
								class="balance">可用余额：{{ integer((userbalance[1]['balance']-userbalance[1]['lockbalance']),2)  }}</text>
						</template>
						<template v-if="key == 3">
							<text
								class="balance">可用余额：{{ userbalance[3]['balance']-userbalance[3]['lockbalance'] }}</text>
						</template>
					</view>
				</view>
				<view class="right flex">
					<m-icon size="40" :color="key == value ? 'var(--theme)' : '#999999'"
						:type="key == value ? 'icon-chenggong' : 'icon-weixuanzhongyuanquan'" />
				</view>
			</view>
		</template>
	</radio-group>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		name: 'payType',
		data() {
			return {
				payType: 22
			};
		},
		computed: {
			...mapState({
				enum: state => state.general.enum,
				userbalance: state => state.user.userbalance
			}),
			// 图标
			payIcon() {
				return {
					1: 'YE',
					3: 'YE',
					2: 'WX',
					22: 'BANK',
					23: 'SM',
					12: 'ZFB',
					// 4: 'BDJF',
					// 11:'WX',
					// 12:'ZFB',
					// 22: 'WX',
					// 31: 'ZFB',
					// 32: 'WX',
					// 33: 'SM',
					34: 'juhe'
				};
			},
			defaultList() {
				// return this.enum['PayType'];
				return {
					1: "现金余额",
					3: "收益余额",
					22: '银行卡',
					23: '云闪付扫码',
					12: "支付宝",
					// 11:'微信',
					// 12:'支付宝',
					// 22: "微信",
					// 31: '支付宝通道2',
					// 32: '微信扫码',
					// 33: '云闪付',
					34: '聚合支付'
				}
			},
			payList() {
				// return this.enum['PayType'];
				return this.type == null ? this.enum['PayType'] : this.type
			}
		},
		mounted() {
			console.log('this.type===>', this.type)
		},
		watch: {
			payType(val) {
				this.$emit('input', val);
			}
		},
		props: {
			type: {
				type: Object,
				default: null
			},
			value: {
				type: [Number, String],
				default: 0
			},
			removeBalance: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			radioChange({ detail: { value } }) {
				this.$emit('input', value);
			}
		}
	};
</script>

<style lang="scss">
	.pay-box {
		.label {
			padding: 30rpx 0;

			.left {
				.title {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.balance {
					display: inline-block;
					padding-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.label+.label {
			border-top: 1rpx solid var(--border);
			padding-top: 30rpx;
		}
	}
</style>